<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns:wicket>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>FacebookPanel</title>
	</head>

	<body>

		<!-- all elements that need to be rendered go in here -->
		<wicket:panel>

			<div class="panelTitle"><span wicket:id="labelTitle" /></div>

			<!-- need to add this root panel for the namespace fb: to work properly -->
			<div id ="fb-root">

				<!-- preload fb javascript sdk -->
				<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>

				<!-- fb init and stuff -->
				<script type="text/javascript">

					//sets the access token in the java backend
					function login(response) {

						//make a GET request to this id (i.e. the 'behavior' object in the .java file)
						//and pass the access token
						wicketAjaxGet("?wicket:interface=:0:facebookPanel::IActivePageBehaviorListener:0:&wicket:ignoreIfNotActive=true&fb_access_token=" + response.session.access_token, null, null);

					}

					//do cleanup etc
					function logout(response) {

						//pass null instead of token
						wicketAjaxGet("?wicket:interface=:0:facebookPanel::IActivePageBehaviorListener:0:&wicket:ignoreIfNotActive=true&fb_access_token=null", null, null);

					}

					//init facebook
					FB.init({	appId:	'113587772056243',	//id of the facebook what do i need today app
								cookie:	true,				//we just have the app so it can provide the id
								status:	true,				//the app will never leave development mode/state
								xfbml:	true
					});

					//if the user logs in we need to set the access token
					FB.Event.subscribe('auth.login', function(response) {
						login(response);
					});

					//if the user logs out we need to do cleanup stuff
					FB.Event.subscribe('auth.logout', function(response) {
						logout(response);
					});

					//if the user is already logged in we need to set the access token
					FB.getLoginStatus(function(response) {
						if (response.session) {
							login(response);
						}
					});

				</script>

				<!-- the super cool blue fb login button -->
				<div wicket:id="fbLoginButton">

					<!-- turn the login button into a logout button after login -->
					<!-- and request permissions -->
					<!-- see https://developers.facebook.com/docs/authentication/permissions/ -->
					<fb:login-button
						autologoutlink="true"
						perms="user_events,user_birthday,user_location,friends_events,friends_birthday,friends_location"></fb:login-button>
					<!-- button text would go in the above tag -->
					<!-- but this text does not update when autologoutlink is true -->
					<!-- newlines and multiline comments in this tag seem to mess up the button -->

				</div>

			</div>

			<!-- this is where all the information goes -->
			<!-- static id="" helps updating this component -->
			<!-- use the static id to update the component -->
			<!-- this id must be a regular html id and NOT A WICKET:ID -->
			<!-- setOutputMarkupId for this component must not be set to true! -->
			<div wicket:id="fbInformation" id="fbInformation">
				<table class="dataView">
					<tr wicket:id="fbEntry">
						<td><span wicket:id="fbEntryContent" /></td>
					</tr>
				</table>
			</div>
			
		</wicket:panel>
			
	</body>

</html>
